<template>

    <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,i) in lunbotu" :key="i">
                <img :class="[isfull?'img-full':'img-normal']" :src="item[imgname]" alt="">
            </mt-swipe-item>
    </mt-swipe>
    
</template>

<script>
export default {
    data() {
        return{

        }
    },
    methods:{
       //将来谁使用这个轮播图组件，就必须为其传递一个lunbotu的数组
        //同时只能接受img属性的图片作为轮播图展示出来
    },
     props:['lunbotu','imgname','isfull']
}
</script>
<style lang="scss" scoped>
    .mint-swipe{
        height: 180px;
        .mint-swipe-item{
            text-align: center;
            //撑满父元素
            .img-full{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            //高度100% 宽度自适应 横向位置居中
            .img-normal{
                height: 100%;

            }
            &:nth-child(1){//nth-child表示这个类中的第一个div,其中&表示嵌套也是一个连接符，scss语法中表示在上一级中的，此处是连接类mint-swipe-item的
                background-color:#9BACC1;
            }
             &:nth-child(2){
                background-color:#9BACC1;
            }
             &:nth-child(3){
                background-color: #9BACC1;
            }
        }
    }
</style>